/* 
useful css-script to reset, not used in our example
@import "reset.css"; 
*/
	/* Resets */
	* {
		margin: 0; padding: 0;
	}
	
	
	/* For modern browsers */
	/* http://nicolasgallagher.com/micro-clearfix-hack/ */
	.cf:before,
	.cf:after {
	    content:" ";
	    display:table;
	}
	
	.cf:after {
	    clear:both;
	}
	
	/* For IE 6/7 (trigger hasLayout) */
	.cf {
	    zoom:1;
	}
	
	body {
		background: #e6e6e6 url('../images/bg.jpg' ) left top repeat fixed;	
		color: #333;
		font-family: chaparral-pro, serif;
		font-size: 15px;
		line-height: 1.5;
		margin: 0;
		padding: 0;
	}
	
	h1, h2, h3 {
		font-family: Tangerine, serif;
	}
	
	h2 {
		font-size: 30px;
		font-weight: normal;
		margin: 0 0 15px;
	}
	
	h3 {
		font-size: 24px;
		font-weight: normal;
		margin: 30px 0 15px;
	}
	
	.content_sub h2,
	.content_sub h3 {
		font-family: myriad-pro, sans-serif;
		font-weight: bold;
	} 
	
	.content_sub h2 {
		font-size: 18px;
		margin: 15px 0 0;
	}
	
	.content_sub h3 {
		color: #333;
		font-size: 15px;
		margin: 15px 0 0;
	}
	
	p {
		margin: 0 0 15px;
	}
	
	ul {
		margin-left: 15px;
	}
	
	.wrapper {
		background: #e6e6e6;
		border: 1px solid #ccc; 
		border-bottom: none;
		margin: 48px auto 0;
		/*max-width: 1080px;*/

		width: 1080px;
	}
	
	header {
		background: rgb(124,190,79);
		color: #fff;
	}
	
	h1 {
		float: left;
		height: 66px;
		margin: 48px 0 48px 60px;
		width: 240px;
	}
	
	.tagline {
		float:  right;
		font-size: 18px;
		font-style: italic;
		line-height: 1.4;
		margin: 45px 60px 0 0;
		width: 240px;
	}
	
	article {
		background: transparent url(../images/figure.png) 750px bottom no-repeat;
	}
	
	.content_main {
		background: #fff;
		float: left;
		padding: 48px 60px;
		width: 600px;
	}
	
	.content_sub {
		float: right;
		padding: 48px 60px;
		width: 240px;
	}
	
	.portrait {
		border: 1px solid #ccc;
	}

	footer {
		background: #333;
		color: #fff;
		clear: both;
		padding: 15px 60px 1px;
	}
	
@media only screen and (max-width:660px) {
	.wrapper { width:100%; margin-top: 0px;} /* if necessary */
	.content_main, .content_sub { 
		float:none; 
		width:100%; 
		-webkit-box-sizing:border-box; /* standard box-model: box-width = width+2*padding+2*border */
		-moz-box-sizing:border-box;    /* border-box-model: box-width = width (contains padding, border and width) */ 
		box-sizing:border-box;         /* http://quirksmode.org/css/user-interface/boxsizing.html */
	}
}
@media only screen and (max-width:400px) {
	.tagline{
		float: none;
		width: 100%;
		text-align: center;
	}
	.portrait{
		display: none;
	}
	a{
		display: none;
	}
}


